<template>
  <div>
    <avue-crud :key="avueCurdKey"  ref="avueCrud" :data="mappingConfig.mappingColumns"
               :option="mappingColumnOption"
               @row-save="addColumnConfig"
               @row-update="editColumnConfig"
               @row-del="delColumnConfig"></avue-crud>
  </div>
</template>

<script>
import startMappingColumnOption from "./startMappingColumnOption";

export default {
  name: "startMappingColumnConfig",
  props: {
    mappingConfig: {
      type: [Object],
      required: true,
    },
    cloudFormColumn: {
      type: [Array],
      required: true,
    },
  },
  data() {
    return {
      mappingColumnOption: null,
      avueCurdKey: Math.random(),
    }
  },
  created() {
    if (!this.mappingConfig.mappingColumns) {
      this.mappingConfig.mappingColumns = []
    }
    this.avueCurdKey = Math.random()
    this.initOption();
  },
  methods: {
    initOption() {
      this.mappingColumnOption = startMappingColumnOption(this.mappingConfig.dataSourceKey, this.mappingConfig.targetTableName, this.cloudFormColumn)
    },
    addColumnConfig(row, done, loading) {
      this.mappingConfig.mappingColumns.unshift(row);
      done()
    },
    editColumnConfig(row, index, done, loading) {
      this.mappingConfig.mappingColumns[index] = row;
    },
    delColumnConfig(row, index) {
      this.$confirm(`此操作将永久删除序号为【${index + 1}】配置！ 是否继续?`, '系统提示', {
        confirmButtonText: '是',
        cancelButtonText: '否',
        type: 'warning'
      }).then(() => {
        this.mappingConfig.mappingColumns.splice(index, 1);
      })

    }
  },
  beforeDestroy() {
    console.log("元素销毁")
  }
}
</script>

<style scoped>

</style>
